<template>
  <FormSection title="专业技能">
    <FormItem
      v-for="(skill, index) in resumeData.skills"
      :key="index"
      @remove="removeSkill(index)"
    >
      <FormField
        label="技能描述"
        type="textarea"
        placeholder="请描述专业技能"
        :rows="3"
        v-model="skill.description"
      />
    </FormItem>
    <AddButton text="添加专业技能" @click="$emit('add-skill')" />
  </FormSection>
</template>

<script setup lang="ts">
import FormSection from './FormSection.vue'
import FormField from './FormField.vue'
import FormItem from './FormItem.vue'
import AddButton from './AddButton.vue'

interface Skill {
  description: string
}

interface ResumeData {
  skills: Skill[]
}

interface Props {
  resumeData: ResumeData
}

defineProps<Props>()

const emit = defineEmits<{
  'add-skill': []
  'remove-skill': [index: number]
}>()

const removeSkill = (index: number) => {
  emit('remove-skill', index)
}
</script>
